<template>
  <div class="charts">
    <div class="main">
      <div class="header">
        <div class="box">
          <div
            class="item"
            v-for="(item, index) in nav"
            :key="item.id"
            :class="currentIndex === index ? 'btn-bgc' : ''"
            @click="changeChartsTime(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="body">
        <!-- 新增用户量 -->
        <div class="userCount" ref="user"></div>

        <!-- 站点访问量 -->
        <div class="webViewCount" ref="webView"></div>

        <!-- 评论量统计图 -->
        <div class="commentCount" ref="comment">
          <!-- 评论图表 -->
        </div>

        <!-- 浏览量统计图 -->
        <div class="viewCount" ref="view">
          <!-- 浏览图表 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { getLikeINfoService, getNewUserReportService, getWebViewCountService } from '@/api/Charts'

const currentIndex = ref(1)
const nav = ref([
  {
    id: 1,
    name: '昨日',
  },
  {
    id: 2,
    name: '近七日',
  },
  {
    id: 3,
    name: '近30日',
  },
  {
    id: 4,
    name: '本周',
  },
  {
    id: 5,
    name: '本月',
  },
])

// 新增用户统计数据
const newUserList = ref({})
// 站点访问统计数据
const webViewCountList = ref({})

// 1. 昨日时间区间
const yesterdayStart = dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')
const yesterdayEnd = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
// 2. 近七日时间区间
const lastSevenDaysStart = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD')
const lastSevenDaysEnd = dayjs().endOf('day').format('YYYY-MM-DD')
// 3. 近30日时间区间
const lastThirtyDaysStart = dayjs().subtract(29, 'day').startOf('day').format('YYYY-MM-DD')
const lastThirtyDaysEnd = dayjs().endOf('day').format('YYYY-MM-DD')
// 4. 本周时间区间
const currentWeekStart = dayjs().startOf('week').format('YYYY-MM-DD')
const currentWeekEnd = dayjs().endOf('week').format('YYYY-MM-DD')
// 5. 本月时间区间
const currentMonthStart = dayjs().startOf('month').format('YYYY-MM-DD')
const currentMonthEnd = dayjs().endOf('month').format('YYYY-MM-DD')

/**
 * 默认时间
 */
const defaultTime = ref({
  begin: lastSevenDaysStart,
  end: lastSevenDaysEnd,
})

const changeChartsTime = (index) => {
  currentIndex.value = index
  switch (index) {
    case 0:
      defaultTime.value.begin = yesterdayStart
      defaultTime.value.end = yesterdayEnd
      http()
      break
    case 1:
      defaultTime.value.begin = lastSevenDaysStart
      defaultTime.value.end = lastSevenDaysEnd
      http()
      break
    case 2:
      defaultTime.value.begin = lastThirtyDaysStart
      defaultTime.value.end = lastThirtyDaysEnd
      http()
      break
    case 3:
      defaultTime.value.begin = currentWeekStart
      defaultTime.value.end = currentWeekEnd
      http()
      break
    case 4:
      defaultTime.value.begin = currentMonthStart
      defaultTime.value.end = currentMonthEnd
      http()
      break
  }
}

const getNewUserList = async (begin, end) => {
  const { data } = await getNewUserReportService(begin, end)
  // 将dateList字符串按逗号分割成数组
  data.dateList = data.dateList.split(',')
  // 将newUserList字符串按逗号分割，再把每个元素转成数字组成数组
  data.newUserList = data.newUserList.split(',').map(Number)
  newUserList.value = data
  inintUserCountChart()
}

const getWebViewCountList = async (begin, end) => {
  const { data } = await getWebViewCountService(begin, end)
  console.log(data)
  data.dateList = data.dateList.split(',')
  data.infoList = data.infoList.split(',').map(Number)
  webViewCountList.value = data
  initWebViewCountChart()
}

const getLikeList = async (begin, end) => {
  // const { data } = await getLikeINfoService(begin, end)
}

const user = ref()
const webView = ref()
const comment = ref()
const view = ref()

// 初始化新增用户量图表
const inintUserCountChart = () => {
  const chart = user.value
  const myChart = echarts.init(chart)
  const option = {
    title: { text: '新增用户量统计' },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: newUserList.value.dateList,
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: function (value) {
          return value + '个'
        },
      },
    },
    series: [
      {
        data: newUserList.value.newUserList,
        type: 'line',
        smooth: true,
      },
    ],
  }
  myChart.setOption(option)
}

// 初始化网站访问量统计
const initWebViewCountChart = () => {
  const chart = webView.value
  const myChart = echarts.init(chart)
  const option = {
    title: { text: '站点访问量统计' },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: webViewCountList.value.dateList,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '站点访问量',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: webViewCountList.value.infoList,
      },
    ],
  }
  myChart.setOption(option)
}

const http = () => {
  getNewUserList(defaultTime.value.begin, defaultTime.value.end)
  getWebViewCountList(defaultTime.value.begin, defaultTime.value.end)
}
onMounted(() => {
  http()
  getLikeList(defaultTime.value.begin, defaultTime.value.end)
})
</script>

<style lang="scss" scoped>
.charts {
  height: 100vh;
  padding: 15px;
  overflow: hidden;
  background-color: #f3f4f5;

  .header {
    padding: 6px 2px;
    .box {
      width: 30vw;
      height: 5vh;
      display: flex;

      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 100%;
        border: 0.3px solid #f3f4f5;
        cursor: pointer;
        transition: all 0.3s;
      }
      :hover {
        background-color: #d2e7ebcb;
      }
    }
  }

  .main {
    height: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    display: flex;
    flex-direction: column;

    .body {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding-right: 10px;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .webViewCount,
      .commentCount,
      .viewCount,
      .userCount {
        width: 100%;
        height: 400px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px;
      }
    }
  }
}

.btn-bgc {
  background-color: #9ed9eb;
}
</style>
